<template>
    <div>
      <div id="container">

      </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            // 页面挂载完, 开始异步引入 高德地图

            // 创建了一个回调函数, 高德地图加载完毕后会调用
            window.onLoad = function () {
                // 所有关于地图的逻辑;
                // 全部都要写在这个回调里面;
                // 保证高德地图加载完毕;
                var map = new AMap.Map("container", {
                  zoom: 17,
                  center: [113.3245904, 23.1066805],
                  viewMode: '3D'
                });

                var marker = new AMap.Marker({
                  position: [113.3245904, 23.1066805],
                  title: '广州塔',
                  offset: new AMap.Pixel(-100,-100),
                  // 如果是替换图标使用 icon 属性
                  icon: '//vdata.amap.com/icons/b18/1/2.png',
                  // 如果希望自定义内容, 可以使用 content 属性
                  // 如果用了 content 那么 icon 图标失效
                  content: '<h2>广州塔</h2>'
                })

                map.add(marker)

                AMap.plugin('AMap.ToolBar', function() {
                  var toolbar = new AMap.ToolBar();
                  map.addControl(toolbar);
                })

            };

            // api 地址
            var url =
                "https://webapi.amap.com/maps?v=1.4.15&key=241755b73732c860b503a19d5d3766f9&callback=onLoad";

            // 创建一个 script dom 元素
            var jsapi = document.createElement("script");

            // 设定 script 标签属性
            jsapi.charset = "utf-8";
            jsapi.src = url;

            // 将api文件引入到页面中, 加载完毕以后就会调用回调函数 onLoad
            document.head.appendChild(jsapi);
        },
    };
</script>

<style lang="less" scoped>
#container {
  width: 800px;
  height: 600px;
}
</style>